<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useSettingStore } from '@/stores/index'
let salvProName = [
    "喀什广建集团有限公司",
    "喀什广建集团有限公司",
    "喀什广建集团有限公司",
    "喀什广建集团有限公司",
]
let data = [50, 20, 40, 20]
let dataBg = [1, 1, 1, 1]
let maxData = 70
const myColor = ["#1edcaa", "#1ea5f5"].reverse()
let option = {

    grid: {
        left: "5%",
        top: 15,
        bottom: 0,
        right: "10%",
        // containLabel: true
    },
    xAxis: [
        {
            type: "value",
            max: maxData,
            show: false,
        },
        {
            type: "value",
            show: false,
        },
    ],

    yAxis: [
        {
            type: "category",
            inverse: true,
            axisLabel: {
                color: "#FFF",
                inside: true,
                verticalAlign: "bottom",
                lineHeight: 24,
                fontSize: 14,
                formatter: (name: string, index: any) => {
                    const id = index + 1
                    if (id < 4) {
                        return `{icon${id}|${id}} {a|${name}}`
                        // name.length > 9 ? name.slice(0, 9) + "..." : name
                    } else {
                        return `{count|${id}} {a|${name}}`
                    }
                },
                rich: {
                    a: {
                        padding: [4, 0, 6, 0],
                        fontFamily: "Source Han Sans CN",
                        fontWeight: 400,
                        fontSize: "15px",
                        color: "#D5E5FF",
                        lineHeight: 16,
                    },
                    icon1: {
                        width: 20,
                        height: 16,
                        align: "center",
                        backgroundColor: "#F65F71",
                        color: "#ffffff",
                        fontSize: 14,
                        lineHeight: 40,
                        padding: [4, 0, 0, 0],
                    },
                    icon2: {
                        width: 20,
                        height: 16,
                        align: "center",
                        backgroundColor: "#FFB64C",
                        color: "#ffffff",
                        fontSize: 14,
                        lineHeight: 40,
                        padding: [4, 0, 0, 0],
                    },
                    icon3: {
                        width: 20,
                        height: 16,
                        align: "center",
                        backgroundColor: "#1D6CC8",
                        color: "#ffffff",
                        fontSize: 14,
                        lineHeight: 40,
                        padding: [4, 0, 0, 0],
                    },
                    count: {
                        width: 20,
                        height: 16,
                        align: "center",
                        backgroundColor: "#123666",
                        color: "#ffffff",
                        fontSize: 14,
                        lineHeight: 40,
                        padding: [4, 0, 0, 0],
                    },
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            data: salvProName,
        },
        {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
                textStyle: {
                    color: "#ffffff",
                    fontSize: "12",
                    fontFamily: "DIN",
                    fontWeight: 700,
                },
                formatter: function (value: string) {
                    return value + "KT"
                },
            },
            data: data,
        },
    ],
    series: [
        {
            name: "进度部分",
            type: "bar",
            zlevel: 1,
            itemStyle: {
                borderRadius: 3,
                color: (params: any) => {
                    var num = myColor.length
                    return {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#1b2f5f",
                            },
                            {
                                offset: 1,
                                color: myColor[params.dataIndex % num],
                            },
                        ],
                    }
                },
            },
            barWidth: 5,
            barGap: "0%",

            data: data,
        },
        {
            name: "背景部分",
            type: "bar",
            xAxisIndex: 1,
            barWidth: 5,
            barGap: "-100%",
            data: dataBg,
            itemStyle: {
                normal: {
                    color: "#D0DEEE",
                    opacity: 0.1,
                },
            },
        },
        // 进度条的小圆圈
        {
            name: "小圈圈",
            type: "scatter",
            emphasis: {
                scale: false,
            },
            symbol:
                "image://",
            symbolSize: [20, 20],
            itemStyle: {
                color: "#FFF",
                shadowColor: "rgba(255, 255, 255, 1)",
                shadowBlur: 5,
                borderWidth: 1,
                opacity: 1,
            },
            z: 2,
            zlevel: 10,
            data: data,
            animationDelay: 500,
        },
    ],
}
</script>
<template>
    <ItemWrap title="设备总览">
        <v-chart class="comp-box" :option="option" autoresize></v-chart>
    </ItemWrap>
</template>
<style lang="scss">
.comp-box {
    height: calc(100% - 12px);
}
</style>